import React, {Component} from 'react'
import {List, Button} from 'antd-mobile'
import CInput from '../../components/c_input'
import { createForm } from 'rc-form'
import {modal, post} from '../../common/js/utils'

@createForm()
class LoginForm extends Component {

  onSubmit = (e) => {
    if (e.keyCode === 13) {
      this.doLogin()
    }
  }

  doLogin = () => {
    this.props.form.validateFields((errors, values) => {
      if (!errors) {
        post('/users/login', values, loading => { modal.loading(loading) }).then(res => {
          if (res.result === 1) {
            window.location.reload()
          }
        }).catch(() => {})
      }
    })
  }

  render() {
    return (
      <List renderHeader={'用户登录'}>
        <CInput
          form={this.props.form}
          rules={[{
            required: true,
            message: '请输入用户名'
          }]}
          placeholder={'请输入用户名'}
          name={'username'}
          clear
        >用户名：</CInput>
        <CInput
          onKeyDown={this.onSubmit}
          form={this.props.form}
          rules={[{
            required: true,
            message: '请输入密码'
          }]}
          type={'password'}
          placeholder={'请输入密码'}
          name={'password'}
          clear
        >密码：</CInput>
        <div
          style={{
            padding: 5
          }}
        >
          <Button onClick={this.doLogin} type={'primary'} size={'large'}>登录</Button>
        </div>
      </List>
    )
  }
}

export default LoginForm
